<template>
  <div class="index">
    <el-container>
      <el-aside width="200px">
        <div></div>
        <SideMenu></SideMenu>

      </el-aside>
      <el-container>
        <el-header>
          <strong>后台管理系统</strong>
          <div class="header-avatar">
            <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
            <el-dropdown>
              <span class="el-dropdown-link" style="color:  #333">
                {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item>
                  <router-link :to="{ name: 'UserCenter' }">个人中心</router-link>
                </el-dropdown-item> -->
                <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <Tabs></Tabs>
          <div class="main-content">
            <el-backtop target=".main-content" :visibility-height=10></el-backtop>
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import SideMenu from '../components/SideMenu.vue';
import Tabs from '../components/Tabs.vue';

export default {
  name: "Home",
  components: {
    SideMenu, Tabs
  },
  data() {
    return {
      userInfo: {
        id: "",
        username: "",
        avatar: ""
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      this.$axios.get("/adminInfo").then(res => {
        this.userInfo = res.data.data
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo))
        this.$store.commit('saveUserInfo', this.userInfo);
      })
    },
    logout() {
      this.$axios.post("/admin/logout").then(res => {
        localStorage.clear()
        sessionStorage.clear()
        // 调用vuex的resetState方法，恢复vuex的默认状态
        this.$store.commit("resetState")
        this.$router.push("/login")
      })
    },
  }

}
</script>

<style>
html,
body,
#app,
.index,
.el-container {
  padding: 0;
  margin: 0;
  height: 100%;
}

.header-avatar {
  float: right;
  width: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
}

.el-header {
  background-color: #e7a2c1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: left;
  line-height: 200px;
}

.el-main {
  color: #333;
  padding: 0;

  display: flex;
  flex-direction: column;
}

.main-content {
  margin: 0 15px;
  flex: 1;
  overflow: auto;
}

.el-backtop {
  background-color: #409eff;
  color: #ffff;
}

.el-backtop:hover {
  background-color: #72b4f7;
}

a {
  text-decoration: none;
}

/* body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
} */

/* .a {
  margin-left:100px ;
} */
</style>
